<%- include head %>
<canvas id = "bgCanvas"></canvas>
<div id="app" class="form-horizontal" style="margin:150px auto;position: absolute;
    top: -100px;width: 100%;">
      <div id="myform" style="margin:100px auto">
          <div class="form-group">
            <label class="col-sm-2 control-label">用户名:</label>
            <div class="col-sm-10">
                <input   required v-model="username" class="form-control"/>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label">输入密码:</label>
            <div class="col-sm-10">
                <input id="password" type="password" required v-model="userpassword" class="form-control"/>
            </div>
          </div>  
          <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                 <button v-on:click="sub()" class="btn btn-default">登录</button>
                 <button v-on:click="toReg()" class="btn btn-default">注册</button>
              </div>
          </div>
      </div>
    </div>
<script>
var canvas = document.querySelector('canvas');
    var c = canvas.getContext('2d');

    canvas.width = window.innerWidth-3.5;
    canvas.height = window.innerHeight-3.5;

    var particleCount = 750;
    var mouse = {
      x: window.innerWidth / 2,
      y: window.innerHeight / 2
    };

    window.addEventListener("mousemove",
      function(event) {
        mouse.x = event.clientX - canvas.width / 2;
        mouse.y = event.clientY - canvas.height / 2;
      });

    window.addEventListener("resize",
      function() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        lightParticles = [];
        initializeParticles();
      });

    function LightParticle(x, y, radius, color) {
      this.x = x;
      this.y = y;
      this.radius = radius;
      this.color = color;

      this.update = function() {

        this.draw();
      };

      this.draw = function() {
        c.save();
        c.beginPath();
        c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
        c.shadowColor = this.color;
        c.shadowBlur = 15;
        c.shadowOffsetX = 0;
        c.shadowOffsetY = 0;
        c.fillStyle = this.color;
        c.fill();
        c.closePath();
        c.restore();
      };
    }

    var lightParticles = [];

    var timer = 0;
    var opacity = 1;
    var speed = 0.0005;
    var colors = ["#0952BD", "#A5BFF0", "#118CD6", "#1AAEE8", "#F2E8C9"];

    var initializeParticles;

    (initializeParticles = function() {
      for (var i = 0; i < particleCount; i++) {

        var randomColorIndex = Math.floor(Math.random() * 6);
        var randomRadius = Math.random() * 2;

        // Ensure particles are spawned past screen width and height so
        // there will be no missing stars when rotating canvas
        var x = (Math.random() * (canvas.width + 200)) - (canvas.width + 200) / 2;
        var y = (Math.random() * (canvas.width + 200)) - (canvas.width + 200) / 2;
        lightParticles.push(new LightParticle(x, y, randomRadius, colors[randomColorIndex]));
        }
    })();

    function animate() {
      window.requestAnimationFrame(animate);

      c.save();
      if (isMouseDown === true) {

            // Ease into the new opacity
            var desiredOpacity = 0.01;
            opacity += (desiredOpacity - opacity) * 0.03;
            c.fillStyle = "rgba(43, 39, 72," + opacity + ")";

            // Ease into the new speed
            var desiredSpeed = 0.012;
            speed += (desiredSpeed - speed) * 0.01;
            timer += speed;

      } else {

            // Ease back to the original opacity
            var originalOpacity = 1;
            opacity += (originalOpacity - opacity) * 0.01;
            c.fillStyle = "rgba(39, 43, 72, " + opacity + ")";

            // Ease back to the original speed
            var originalSpeed = 0.001;
            speed += (originalSpeed - speed) * 0.01;
            timer += speed;

      }

      c.fillRect(0, 0, canvas.width, canvas.height);
      c.translate(canvas.width / 2, canvas.height / 2);
      c.rotate(timer);

      for (var i = 0; i < lightParticles.length; i++) {
        lightParticles[i].update();
      }

      c.restore();

  }

    var isMouseDown = false;

    window.addEventListener("mousedown",
    function() {
      isMouseDown = true;
    });

    window.addEventListener("mouseup",
      function() {
        isMouseDown = false;
      });

    animate();
var app = new Vue({
  el: '#app',
  data: {
    username: '',
    userpassword:''
  },
  methods:{
    sub:function(){
      if(!this.username){
          alert("用户名不能为空");
          return;
      } else if(!this.userpassword){
          alert("密码不能为空");
          return;
      }
      var postData={};
      postData.name = this.username;
      postData.password = this.userpassword;
    
      this.$http.post('/login',postData)
      .then((response)=>{
            alert(response.data.msg);
            if(response.data.status_code==1){
               window.location.href ='/index';
            }
          },(response)=>{
            alert("登录失败");
          })
    },
    toReg:function(){
      window.location.href = './register';
    }
  }
})
</script>
<style>
#bgCanvas p {
  position: absolute;
  top: 10px;
  left: 12px;
  color: white;
  opacity: 0;
  font-family: "Source Sans Pro";
  animation: fadeIn 2s ease-out, chill 2s 2s, fadeOut 2s 4s;
}

#bgCanvas .social:hover a {
  transform: rotate(-45deg) scale(1.05);
}
#bgCanvas .social:hover i {
  color: #21c2ff;
}

#bgCanvas a {
  position: absolute;
  bottom: -40px;
  right: -75px;
  background: white;
  color: white;
  box-shadow: -1px -1px 20px 0px rgba(0, 0, 0, 0.3);
  display: inline-block;
  width: 150px;
  height: 80px;
  transform-origin: 50% 50%;
  transform: rotate(-45deg);
  transition: .15s ease-out;
}

#bgCanvas i {
  position: absolute;
  bottom: 7px;
  right: 7px;
  pointer-events: none;
  color: #00ACED;
  z-index: 1000;
  font-size: 100px;
  transition: .15s ease-out;
}
</style>
<%- include foot %>

